<template>
    <div>
        <div class="operation">
            <a class="btn btn-theme" @click="showAddModal(1)">添加子级</a>
            <a class="btn btn-theme" @click="showAddModal(0)">添加同级</a>
            <a class="btn btn-theme" @click="showModifyModal">编辑放置地</a>
            <a class="btn btn-theme" @click="deleteWh">删除放置地</a>
            <!--<a class="btn btn-theme">添加放置地</a>-->
        </div>
        <div style="border:2px solid #d2d6de;" id="whlocation_content">
            <ul id="whlocation_content_ul">

            </ul>
        </div>
        <div class="modal fade" id="whlocation_add_kind_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="exampleModalLabel">添加放置地</h4>
                                </div>
                                <div class="modal-body">
                                    <form>
                                        <div class="form-group">
                                            <label class="control-label">放置地名称</label>
                                            <input id="whlocation_add_kind_name" type="text" class="form-control">
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary" @click="addWh">提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
                     <div class="modal fade" id="whlocation_modify_kind_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="exampleModalLabel">编辑放置地</h4>
                                </div>
                                <div class="modal-body">
                                    <form>
                                        <div class="form-group">
                                            <label class="control-label">放置地名称：</label>
                                            <input id="modify_fname" type="text" class="form-control">
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary" @click="modifyWh">提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                tabledata: '',
                currentId: ''
            }
        },
        methods: {
            getData() {
            var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/whlocation/fetchalllist',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'teamid': localStorage.activeteamid
                    },
                    dataType: 'json',
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误');
                    },
                    success: function(retdata) {
                        if (retdata.Table2[0].result == false) {} else {
                            var j = 0;
                            parent = [];
                            var htmlcont = '';
                            for (var i = 0; i < retdata.Table2.length; i++) {
                                if (retdata.Table2[i].fdid == 0) {
                                    htmlcont += '<li id="' + retdata.Table2[i].fidno + '"><input type="radio" name="whlocation">' + retdata.Table2[i].fname + '<ul></ul></li>';

                                    parent[j] = retdata.Table2[i].fidno;
                                    j++;
                                }
                            }
                            $('#whlocation_content_ul').html(htmlcont);
                            for (var i = 0; i < retdata.Table2.length; i++) {
                                for (var x = 0; x < j; x++) {
                                    if (retdata.Table2[i].fdid == parent[x]) {
                                        $('li').each(function() {
                                            if ($(this).attr('id') == parent[x]) {
                                                $(this).children('ul').append('<li id="' + retdata.Table2[i].fidno + '"><input type="radio" name="whlocation">' + retdata.Table2[i].fname + '<ul></ul></li>');
                                            }
                                        });
                                        parent[j++] = retdata.Table2[i].fidno;
                                    }
                                }
                            }
                        }
                    }
                });
            },
            showAddModal(type) {
                if (type == 0) {
                    this.currentId = $("input:radio[name='whlocation']:checked").map(function(index, elem) {
                        return $(elem).parent().parent().parent().attr('id');
                    }).get();
                } else {
                    this.currentId = $("input:radio[name='whlocation']:checked").map(function(index, elem) {
                        return $(elem).parent().attr('id');
                    }).get();
                }
                if (this.currentId == '') {
                    this.$store.commit('showModal','请先选择材料类目')
                } else {
                    $('#whlocation_add_kind_modal').modal('show');
                }
            },
            showModifyModal() {
                this.currentId = $("input:radio[name='whlocation']:checked").map(function(index, elem) {
                    return $(elem).parent().attr('id');
                }).get();
                if (this.currentId == '') {
                    this.$store.commit('showModal','请先选择要修改的放置地')
                } else {
                    $('#whlocation_modify_kind_modal').modal('show');
                }
            },
            addWh() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/whlocation/add',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'fdid': _this.currentId,
                        'fname': $('#whlocation_add_kind_name').val(),
                        'teamid': localStorage.activeteamid
                    },
                    dataType: 'json',
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        $('#whlocation_add_kind_modal').modal('hide');
                        _this.getData()
                    }
                });
            },
            modifyWh() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/whlocation/update',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'fidno': _this.currentId,
                        'fname': $('#modify_fname').val()
                    },
                    //async:false,
                    dataType: 'json',
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        $('#whlocation_modify_kind_modal').modal('hide')
                        _this.getData()
                    }
                });
            },
            deleteWh() {
                var _this = this
                this.currentId = $("input:radio[name='whlocation']:checked").map(function(index, elem) {
                    return $(elem).parent().children().children('li').eq(0).attr('id');
                }).get();
                if (this.currentId == '') {
                    this.currentId = $("input:radio[name='whlocation']:checked").map(function(index, elem) {
                        return $(elem).parent().attr('id');
                    }).get();
                    $.ajax({
                        type: 'POST',
                        url: 'http://192.168.1.66:808/api/whlocation/delete',
                        data: {
                            'token': localStorage.token,
                            'userid': localStorage.userid,
                            'fidno': _this.currentId
                        },
                        //async:false,
                        dataType: 'json',
                        crossDomain: true,
                        error: function(request) {
                            _this.$store.commit('showModal','连接错误')
                        },
                        success: function(retdata) {
                            _this.getData()
                        }
                    });
                } else {
                    _this.$store.commit('showModal','该类目下面有子分类，不能删除！')
                }
            }
        },
        mounted() {
            this.getData()
        }
    }
</script>
<style>
    #whlocation_content {
        clear: both;
        text-align: left
    }
    
    #whlocation_content li {
        list-style: none
    }
</style>